<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../../Content/CSS/mojie/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../Content/CSS/mojie/demo.css"/>
		<link rel="stylesheet" href="../../Content/CSS/mojie/iconfont.css"/>
		<link rel="stylesheet" href="../../Content/CSS/mojie/icons-extra.css" />
		<link rel="stylesheet" href="../../Content/CSS/mojie/style.css" />
	</head>
	<body>
		<div class="mui-content product">
			<div class="product-list mui-bar mui-bar-nav bg" style="border-bottom: 1px solid #CCCCCC;"><!--商品详情Tab头部-->
				<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
					<a class="mui-control-item mui-active" href="#item1">商品</a>
					<a class="mui-control-item" href="#item2">详情</a>
					<a class="mui-control-item" href="#item3">评价</a>
				</div>
			</div><!--商品详情Tab头部-->
			<div class="contaniner"><!--商品详情列表-->
				<div id="item1" class="mui-control-content mui-active"><!--Tab1内容-->
					<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll bg fixed-contb" style="margin-top:44px;">
							<!--轮播开始-->
							<div id="slider" class="mui-slider" >
								<div class="mui-slider-group mui-slider-loop">
									<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href="#">
											<img src="../../Content/Images/mojie/demo/goods.png">
										</a>
									</div>
									<!-- 第一张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="../../Content/Images/mojie/demo/goods.png">
										</a>
									</div>
									<!-- 第二张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="../../Content/Images/mojie/demo/goods.png">
										</a>
									</div>
									<!-- 第三张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="../../Content/Images/mojie/1.png">
										</a>
									</div>
									<!-- 第四张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="../../Content/Images/mojie/1.png">
										</a>
									</div>
									<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href="#">
											<img src="../../Content/Images/mojie/1.png">
										</a>
									</div>
								</div>
								<div class="mui-slider-indicator">
									<div class="mui-indicator mui-active"></div>
									<div class="mui-indicator"></div>
									<div class="mui-indicator"></div>
									<div class="mui-indicator"></div>
								</div>
							</div>
							<!--轮播结束-->
							<ul class="mui-table-view">
								<li class="mui-table-view-cell table-view-cell-clean mall-color-title"><span>蒂佳婷水动力活力水润面膜</span><span style="margin-left:1rem;">27ML*5</span></li>
								<li class="mui-table-view-cell table-view-cell-clean"><p>三种成分完美配比三种成分完美配比三种成分完美配比三种成分完美配比三种成分完美配比三种成分完美配比三种成分完美配比三种成分完美配比</p></li>
								<li class="mui-table-view-cell table-view-cell-clean"><p class="mall-font-14" style="color:#666666;">功效：全效修护,抗敏感,舒缓肌肤,滋润,保湿,补水</p></li>
								<li class="mui-table-view-cell table-view-cell-clean mall-color-btn" style="padding-bottom:0;">
									<span>￥</span><span style="font-size:3rem;font-weight: 700;">59</span><span style="font-size:1.5rem;">.00</span>
								</li>
								<li class="mui-table-view-cell table-view-cell-clean" style="padding-top:0;">
									<span style="text-decoration: line-through;">原价：<strong >89</strong></span>
								</li>
								<li class="mui-table-view-cell table-view-cell-clean mall-color-def">
									<span>库存：<strong>42</strong></span>
									<span>销量：<strong>142</strong></span>
									<span>所属品牌：<strong>蒂佳婷</strong></span>
								</li>
								<li class="mui-table-view-cell mall-color-def">
									<a href="" class="mui-navigate-right"><span class="mall-color-btn">商城优惠券</span><span class="fr">马上领取</span></a>
								</li>
							</ul>
						</div>
					</div>
				</div><!--Tab1内容-->
				
				<div id="item2" class="mui-control-content fixed-conta"><!--Tab2内容-->
					<div class="mui-content ">
						<img src="../../Content/Images/mojie/1-1.png"/>
						<img src="../../Content/Images/mojie/2.jpg"/>
						<img src="../../Content/Images/mojie/3.jpg"/>
					</div>
				</div><!--Tab2内容-->
				<div id="item3" class="mui-control-content"><!--Tab3内容-->
					<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed bg fixed-conta">
				        <li class="mui-table-view-cell">
				            <div class="mui-table">
				            	<figure class="mui-col-xs-2 mui-text-left">
				                    <img style="width:100%;" src="../../Content/Images/mojie/icon-demo.jpg"/>
				                </figure>
				                <div class="mui-col-xs-10">
				                	<section>
				                		<h5 class="mui-ellipsis" style="font-size: 1.17rem;line-height: 24px;">yangfan1 2016.11.01</h5>
				                		<div class="icons mui-inline fr">
				                			<i data-index="1" class="mui-icon mui-icon-star mui-active"></i>
				                			<i data-index="2" class="mui-icon mui-icon-star"></i>
				                			<i data-index="3" class="mui-icon mui-icon-star"></i>
				                			<i data-index="4" class="mui-icon mui-icon-star"></i>
				                			<i data-index="5" class="mui-icon mui-icon-star"></i>
				                		</div>
				                	</section>
				                    <p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
				                </div>
				                
				            </div>
				        </li>
				    </ul>
				</div><!--Tab3内容-->
				<div id="cover-pop" class="mui-control-content fixed-conta" style="display:none;"><!--Tab2内容-->
					<div class="mui-content">
						<ul class="mui-table-view table-view-clean">
							<li class="mui-table-view-cell mui-table-list table-view-clean">
								<span class="mall-font-14 mall-color-title">购买信息</span>
								<a href="javascript:;" style="float:right;" onclick="toggle('cover-pop')"><i class="icon iconfont icon-guanbi-01" style="font-size: 14px;"></i></a>
							</li>
						</ul>
						<ul class="mui-table-view table-view-clean"><!--商品信息-->
							<li class="mui-table-view-cell mall-table-view-cell table-view-clean">
								<figure>
									<img style="width:100%;" src="../../Content/Images/mojie/1.png"/>
								</figure>
								<ul class="fr">
									<li class="goods-name"><p class="fl mall-color-title mall-font-14">蒂佳婷水润亮彩焕肤面膜蒂佳婷水润亮彩焕肤面膜蒂佳婷水润亮彩焕肤面膜 27ML*5</p></li>
									<li class="goods-attr">
										<span class="mall-color-btn" style="font-weight: 700;">单价：￥196.00</span>
									</li>
								</ul>
							</li>	
						</ul><!--商品信息-->
						<ul class="mui-table-view table-view-clean">
							<li class="mui-table-view-cell mui-table-list">
								购买数量:
								<div class="mui-numbox" style="margin-left:1.5rem;">
									<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
									<input class="mui-input-numbox" type="number" />
									<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
								</div>
							</li>
							<div class="add-address-submit"><!--添加按钮-->
								<a class="mui-btn mui-btn-danger mui-btn-block" href="">确定</a>					
							</div><!--添加按钮-->
						</ul>
					</div>
				</div><!--Tab2内容-->
			</div><!--商品详情列表-->
			<footer class="mui-bar mui-bar-tab mui-bar-footer trade-footer fixed-footer">
				<div class="trade-order-submit fr mui-btn-blue">
					<a id="buy-submit" class="mui-btn-bule" href="javascript:;" onclick="toggle('cover-pop')">立即购买</a>
				</div>
				<div  id="add-shop" class="trade-order-submit fr opacity buy-submit" style="border-right:1px solid #CCCCCC;">
					<a href="javascript:;" onclick="toggle('cover-pop')">加入购物车</a>
				</div>
			</footer>
		</div>
		
	</body>
</html>
<script src="../../Content/JS/mojie/mui.min.js"></script>
<script type="text/javascript">
	mui.init({
		swipeBack:true //启用右滑关闭功能
	});
	//轮播
	var slider = mui("#slider");			
	slider.slider({
		interval: 2000
	});
	//显示与隐藏
	function toggle(targetid){
	    if (document.getElementById){
	        target=document.getElementById(targetid);
	            if (target.style.display=="block"){
	                target.style.display="none";
	            } else {
	                target.style.display="block";
	            }
	    }
	}
</script>